<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>话题列表 - 社交圈</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    body {
      background-color: #f5f5f7;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1d1d1f;
    }
    
    /* 顶部导航 */
    .top-nav {
      background-color: white;
      padding: 12px 15px;
      position: sticky;
      top: 0;
      z-index: 100;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #eee;
    }
    
    .nav-title {
      font-size: 18px;
      font-weight: 600;
      margin: 0;
    }
    
    .nav-btn {
      color: #1d1d1f;
      font-size: 20px;
    }
    
    /* 搜索栏 */
    .search-bar {
      padding: 10px 15px;
      background-color: white;
      border-bottom: 1px solid #eee;
    }
    
    .search-input-group {
      position: relative;
    }
    
    .search-input {
      width: 100%;
      padding: 10px 15px 10px 40px;
      border-radius: 8px;
      border: 1px solid #eee;
      background-color: #f5f5f7;
      font-size: 14px;
      outline: none;
    }
    
    .search-icon {
      position: absolute;
      left: 15px;
      top: 50%;
      transform: translateY(-50%);
      color: #8e8e93;
    }
    
    /* 分类标签 */
    .category-tabs {
      display: flex;
      overflow-x: auto;
      background-color: white;
      border-bottom: 1px solid #eee;
      padding: 8px 15px;
    }
    
    .category-tab {
      white-space: nowrap;
      padding: 6px 14px;
      margin-right: 8px;
      border-radius: 20px;
      font-size: 15px;
      font-weight: 500;
      color: #666;
      cursor: pointer;
    }
    
    .category-tab.active {
      background-color: #007aff;
      color: white;
    }
    
    /* 话题列表容器 */
    .topics-container {
      padding: 10px;
    }
    
    /* 话题卡片基础样式 */
    .topic-card {
      background-color: white;
      border-radius: 12px;
      margin-bottom: 12px;
      overflow: hidden;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    
    /* 话题头部 */
    .topic-header {
      padding: 12px 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .topic-creator {
      display: flex;
      align-items: center;
    }
    
    .creator-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      object-fit: cover;
      margin-right: 10px;
    }
    
    .creator-info {
      display: flex;
      flex-direction: column;
    }
    
    .creator-name {
      font-weight: 600;
      font-size: 14px;
    }
    
    .topic-time {
      font-size: 12px;
      color: #8e8e93;
    }
    
    .topic-more {
      color: #8e8e93;
      font-size: 18px;
    }
    
    /* 话题内容 */
    .topic-content {
      padding: 0 15px 12px;
    }
    
    .topic-title {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 8px;
      line-height: 1.4;
    }
    
    .topic-text {
      font-size: 15px;
      color: #333;
      line-height: 1.6;
      margin-bottom: 12px;
    }
    
    /* 话题标签 */
    .topic-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 12px;
    }
    
    .topic-tag {
      font-size: 13px;
      color: #007aff;
      background-color: #e8f0fe;
      padding: 3px 10px;
      border-radius: 12px;
    }
    
    /* 媒体内容容器 */
    .topic-media {
      width: 100%;
      margin-bottom: 12px;
      border-radius: 8px;
      overflow: hidden;
    }
    
    /* 单图样式 */
    .media-single img {
      width: 100%;
      height: auto;
      display: block;
    }
    
    /* 多图网格样式 */
    .media-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 3px;
    }
    
    .media-grid img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      aspect-ratio: 1/1;
    }
    
    /* 视频样式 */
    .media-video {
      position: relative;
    }
    
    .media-video img {
      width: 100%;
      height: auto;
      display: block;
    }
    
    .video-play-btn {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 40px;
      height: 40px;
      background-color: rgba(0,0,0,0.5);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
    }
    
    /* 话题统计信息 */
    .topic-stats {
      padding: 8px 15px;
      display: flex;
      justify-content: space-between;
      font-size: 13px;
      color: #8e8e93;
      border-top: 1px solid #eee;
    }
    
    .stat-item {
      display: flex;
      align-items: center;
    }
    
    .stat-item i {
      margin-right: 5px;
      font-size: 14px;
    }
    
    /* 话题操作栏 */
    .topic-actions {
      padding: 8px 15px;
      display: flex;
      justify-content: space-around;
      border-top: 1px solid #eee;
    }
    
    .action-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 1;
      font-size: 14px;
      color: #8e8e93;
      background: transparent;
      border: none;
      padding: 6px 0;
    }
    
    .action-btn i {
      margin-right: 5px;
      font-size: 16px;
    }
    
    .action-btn.active {
      color: #007aff;
    }
    
    .action-btn:hover {
      color: #007aff;
    }
    
    /* 特殊样式话题 */
    /* 投票话题 */
    .topic-poll .topic-content {
      padding-bottom: 0;
    }
    
    .poll-options {
      padding: 0 15px 12px;
    }
    
    .poll-option {
      padding: 12px 15px;
      border: 1px solid #eee;
      border-radius: 8px;
      margin-bottom: 10px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    
    .poll-option.selected {
      border-color: #007aff;
    }
    
    .poll-option .progress-bar {
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      background-color: #e8f0fe;
      z-index: 0;
    }
    
    .poll-option .option-text {
      position: relative;
      z-index: 1;
      display: flex;
      justify-content: space-between;
      font-size: 15px;
    }
    
    .poll-option .option-percent {
      font-weight: 600;
      color: #007aff;
    }
    
    .poll-info {
      padding: 0 15px 12px;
      font-size: 13px;
      color: #8e8e93;
      text-align: right;
    }
    
    /* 活动话题 */
    .topic-event .topic-content {
      padding-bottom: 0;
    }
    
    .event-info {
      padding: 12px 15px;
      background-color: #f9f9f9;
      border-radius: 8px;
      margin: 0 15px 12px;
    }
    
    .event-date, .event-location {
      display: flex;
      align-items: center;
      font-size: 14px;
      margin-bottom: 8px;
    }
    
    .event-date:last-child {
      margin-bottom: 0;
    }
    
    .event-info i {
      color: #ff3b30;
      margin-right: 8px;
      font-size: 16px;
    }
    
    .event-participants {
      padding: 0 15px 12px;
      display: flex;
      align-items: center;
    }
    
    .participant-avatars {
      display: flex;
    }
    
    .participant-avatar {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      object-fit: cover;
      border: 2px solid white;
      margin-left: -8px;
    }
    
    .participant-avatar:first-child {
      margin-left: 0;
    }
    
    .participant-count {
      margin-left: 10px;
      font-size: 14px;
      color: #666;
    }
    
    /* 加载更多 */
    .load-more {
      text-align: center;
      padding: 15px;
    }
    
    .load-more-btn {
      background-color: white;
      border: 1px solid #eee;
      border-radius: 20px;
      padding: 8px 20px;
      font-size: 14px;
      color: #666;
    }
    
    .load-more-btn.loading {
      color: #ccc;
    }
    
    /* 底部导航 */
    .bottom-nav {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: white;
      display: flex;
      justify-content: space-around;
      padding: 8px 0;
      border-top: 1px solid #eee;
      z-index: 90;
    }
    
    .nav-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #8e8e93;
      text-decoration: none;
      font-size: 12px;
      flex: 1;
    }
    
    .nav-item i {
      font-size: 20px;
      margin-bottom: 3px;
    }
    
    .nav-item.active {
      color: #007aff;
    }
    
    /* 空状态 */
    .empty-state {
      padding: 60px 20px;
      text-align: center;
      color: #8e8e93;
    }
    
    .empty-state i {
      font-size: 60px;
      margin-bottom: 15px;
      opacity: 0.5;
    }
  </style>
</head>
<body>
  <!-- 顶部导航 -->
  <div class="top-nav">
    <button class="btn btn-link p-0 nav-btn" onclick="history.back()">
      <i class="fa fa-arrow-left"></i>
    </button>
    <h1 class="nav-title">热门话题</h1>
    <button class="btn btn-link p-0 nav-btn">
      <i class="fa fa-plus"></i>
    </button>
  </div>
  
  <!-- 搜索栏 -->
  <div class="search-bar">
    <div class="search-input-group">
      <i class="fa fa-search search-icon"></i>
      <input type="text" class="search-input" placeholder="搜索话题、标签或内容...">
    </div>
  </div>
  
  <!-- 分类标签 -->
  <div class="category-tabs">
    <div class="category-tab active" data-category="all">全部</div>
    <div class="category-tab" data-category="hot">热门</div>
    <div class="category-tab" data-category="new">最新</div>
    <div class="category-tab" data-category="following">关注中</div>
    <div class="category-tab" data-category="events">活动</div>
    <div class="category-tab" data-category="polls">投票</div>
    <div class="category-tab" data-category="technology">科技</div>
    <div class="category-tab" data-category="entertainment">娱乐</div>
  </div>
  
  <!-- 话题列表 -->
  <div class="topics-container">
    <!-- 标准图文话题 -->
    <div class="topic-card" data-category="hot">
      <div class="topic-header">
        <div class="topic-creator">
          <img src="https://picsum.photos/100/100?random=1" alt="用户头像" class="creator-avatar">
          <div class="creator-info">
            <div class="creator-name">旅行爱好者</div>
            <div class="topic-time">2小时前</div>
          </div>
        </div>
        <button class="btn btn-link p-0 topic-more">
          <i class="fa fa-ellipsis-h"></i>
        </button>
      </div>
      
      <div class="topic-content">
        <div class="topic-title">分享我在云南大理的旅行经历，太美了！</div>
        <div class="topic-text">
          这次大理之行真的太难忘了，苍山洱海的美景让人流连忘返，当地的美食也非常有特色，特别是石板烧和乳扇，推荐大家一定要尝尝！
        </div>
        <div class="topic-tags">
          <span class="topic-tag">#旅行</span>
          <span class="topic-tag">#大理</span>
          <span class="topic-tag">#美食</span>
        </div>
        <div class="topic-media media-grid">
          <img src="https://picsum.photos/300/300?random=10" alt="旅行照片1">
          <img src="https://picsum.photos/300/300?random=11" alt="旅行照片2">
          <img src="https://picsum.photos/300/300?random=12" alt="旅行照片3">
        </div>
      </div>
      
      <div class="topic-stats">
        <div class="stat-item">
          <i class="fa fa-eye"></i>
          <span>2.5k 浏览</span>
        </div>
        <div class="stat-item">
          <i class="fa fa-comment"></i>
          <span>128 评论</span>
        </div>
      </div>
      
      <div class="topic-actions">
        <button class="action-btn">
          <i class="fa fa-thumbs-o-up"></i>
          <span>点赞</span>
        </button>
        <button class="action-btn">
          <i class="fa fa-comment-o"></i>
          <span>评论</span>
        </button>
        <button class="action-btn">
          <i class="fa fa-share-alt"></i>
          <span>分享</span>
        </button>
        <button class="action-btn">
          <i class="fa fa-bookmark-o"></i>
          <span>收藏</span>
        </button>
      </div>
    </div>
    
    <!-- 投票话题 -->
    <div class="topic-card topic-poll" data-category="polls">
      <div class="topic-header">
        <div class="topic-creator">
          <img src="https://picsum.photos/100/100?random=2" alt="用户头像" class="creator-avatar">
          <div class="creator-info">
            <div class="creator-name">电影爱好者</div>
            <div class="topic-time">5小时前</div>
          </div>
        </div>
        <button class="btn btn-link p-0 topic-more">
          <i class="fa fa-ellipsis-h"></i>
        </button>
      </div>
      
      <div class="topic-content">
        <div class="topic-title">你最喜欢的科幻电影是哪一部？</div>
        <div class="topic-text">
          科幻电影总能带给我们无限想象，以下几部都是经典之作，你最喜欢哪一部呢？欢迎投票并在评论区分享你的看法！
        </div>
        <div class="topic-tags">
          <span class="topic-tag">#电影</span>
          <span class="topic-tag">#科幻</span>
          <span class="topic-tag">#投票</span>
        </div>
      </div>
      
      <div class="poll-options">
        <div class="poll-option" data-option="1">
          <div class="progress-bar" style="width: 45%"></div>
          <div class="option-text">
            <span>《星际穿越》</span>
            <span class="option-percent">45%</span>
          </div>
        </div>
        <div class="poll-option" data-option="2">
          <div class="progress-bar" style="width: 30%"></div>
          <div class="option-text">
            <span>《银翼杀手2049》</span>
            <span class="option-percent">30%</span>
          </div>
        </div>
        <div class="poll-option" data-option="3">
          <div class="progress-bar" style="width: 15%"></div>
          <div class="option-text">
            <span>《黑客帝国》</span>
            <span class="option-percent">15%</span>
          </div>
        </div>
        <div class="poll-option" data-option="4">
          <div class="progress-bar" style="width: 10%"></div>
          <div class="option-text">
            <span>《阿凡达》</span>
            <span class="option-percent">10%</span>
          </div>
        </div>
      </div>
      
      <div class="poll-info">
        已有 2,358 人参与投票 · 还剩 3 天结束
      </div>
      
      <div class="topic-stats">
        <div class="stat-item">
          <i class="fa fa-eye"></i>
          <span>8.7k 浏览</span>
        </div>
        <div class="stat-item">
          <i class="fa fa-comment"></i>
          <span>342 评论</span>
        </div>
      </div>
      
      <div class="topic-actions">
        <button class="action-btn">
          <i class="fa fa-thumbs-o-up"></i>
          <span>点赞</span>
        </button>
        <button class="action-btn">
          <i class="fa fa-comment-o"></i>
          <span>评论</span>
        </button>
        <button class="action-btn">
          <i class="fa fa-share-alt"></i>
          <span>分享</span>
        </button>
        <button class="action-btn">
          <i class="fa fa-bookmark-o"></i>
          <span>收藏</span>
        </button>
      </div>
    </div>
    
    <!-- 视频话题 -->
    <div class="topic-card" data-category="entertainment">
      <div class="topic-header">
        <div class="topic-creator">
          <img src="https://picsum.photos/100/100?random=3" alt="用户头像" class="creator-avatar">
          <div class="creator-info">
            <div class="creator-name">音乐达人</div>
            <div class="topic-time">昨天</div>
          </div>
        </div>
        <button class="btn btn-link p-0 topic-more">
          <i class="fa fa-ellipsis-h"></i>
        </button>
      </div>
      
      <div class="topic-content">
        <div class="topic-title">现场实拍：周杰伦演唱会《晴天》大合唱</div>
        <div class="topic-text">
          昨晚周杰伦演唱会太嗨了！当《晴天》前奏响起的时候全场沸腾，几万人一起大合唱的场面太震撼了，分享给没能到现场的朋友们！
        </div>
        <div class="topic-tags">
          <span class="topic-tag">#周杰伦</span>
          <span class="topic-tag">#演唱会</span>
          <span class="topic-tag">#音乐</span>
        </div>
        <div class="topic-media media-video">
          <img src="https://picsum.photos/600/400?random=20" alt="视频封面">
          <div class="video-play-btn">
            <i class="fa fa-play"></i>
          </div>
        </div>
      </div>
      
      <div class="topic-stats">
        <div class="stat-item">
          <i class="fa fa-eye"></i>
          <span>15.2k 浏览</span>
        </div>
        <div class="stat-item">
          <i class="fa fa-comment"></i>
          <span>876 评论</span>
        </div>
      </div>
      
      <div class="topic-actions">
        <button class="action-btn active">
          <i class="fa fa-thumbs-up"></i>
          <span>点赞</span>
        </button>
        <button class="action-btn">
          <i class="fa fa-comment-o"></i>
          <span>评论</span>
        </button>
        <button class="action-btn">
          <i class="fa fa-share-alt"></i>
          <span>分享</span>
        </button>
        <button class="action-btn">
          <i class="fa fa-bookmark-o"></i>
          <span>收藏</span>
        </button>
      </div>
    </div>
    
    <!-- 活动话题 -->
    <div class="topic-card topic-event" data-category="events">
      <div class="topic-header">
        <div class="topic-creator">
          <img src="https://picsum.photos/100/100?random=4" alt="用户头像" class="creator-avatar">
          <div class="creator-info">
            <div class="creator-name">科技社区</div>
            <div class="topic-time">3天前</div>
          </div>
        </div>
        <button class="btn btn-link p-0 topic-more">
          <i class="fa fa-ellipsis-h"></i>
        </button>
      </div>
      
      <div class="topic-content">
        <div class="topic-title">2023人工智能发展论坛，诚邀您参加！</div>
        <div class="topic-text">
          本次论坛将邀请业内顶尖专家共同探讨AI技术的最新发展趋势和应用前景，现场将有精彩演讲和互动环节，欢迎对人工智能感兴趣的朋友参加！
        </div>
        <div class="topic-tags">
          <span class="topic-tag">#人工智能</span>
          <span class="topic-tag">#科技论坛</span>
          <span class="topic-tag">#线下活动</span>
        </div>
        <div class="topic-media media-single">
          <img src="https://picsum.photos/600/300?random=30" alt="活动海报">
        </div>
      </div>
      
      <div class="event-info">
        <div class="event-date">
          <i class="fa fa-calendar"></i>
          <span>2023年7月15日 14:00-17:30</span>
        </div>
        <div class="event-location">
          <i class="fa fa-map-marker"></i>
          <span>北京市海淀区中关村创新中心B座报告厅</span>
        </div>
      </div>
      
      <div class="event-participants">
        <div class="participant-avatars">
          <img src="https://picsum.photos/100/100?random=50" alt="参与者" class="participant-avatar">
          <img src="https://picsum.photos/100/100?random=51" alt="参与者" class="participant-avatar">
          <img src="https://picsum.photos/100/100?random=52" alt="参与者" class="participant-avatar">
          <img src="https://picsum.photos/100/100?random=53" alt="参与者" class="participant-avatar">
          <div class="participant-avatar" style="background-color:#eee;display:flex;align-items:center;justify-content:center;font-size:12px;color:#666">+89</div>
        </div>
        <div class="participant-count">已有 93 人报名参加</div>
      </div>
      
      <div class="topic-stats">
        <div class="stat-item">
          <i class="fa fa-eye"></i>
          <span>4.3k 浏览</span>
        </div>
        <div class="stat-item">
          <i class="fa fa-comment"></i>
          <span>67 评论</span>
        </div>
      </div>
      
      <div class="topic-actions">
        <button class="action-btn">
          <i class="fa fa-thumbs-o-up"></i>
          <span>点赞</span>
        </button>
        <button class="action-btn">
          <i class="fa fa-comment-o"></i>
          <span>评论</span>
        </button>
        <button class="action-btn">
          <i class="fa fa-share-alt"></i>
          <span>分享</span>
        </button>
        <button class="action-btn active">
          <i class="fa fa-check-circle"></i>
          <span>已报名</span>
        </button>
      </div>
    </div>
    
    <!-- 纯文字话题 -->
    <div class="topic-card" data-category="technology">
      <div class="topic-header">
        <div class="topic-creator">
          <img src="https://picsum.photos/100/100?random=5" alt="用户头像" class="creator-avatar">
          <div class="creator-info">
            <div class="creator-name">程序员日常</div>
            <div class="topic-time">1小时前</div>
          </div>
        </div>
        <button class="btn btn-link p-0 topic-more">
          <i class="fa fa-ellipsis-h"></i>
        </button>
      </div>
      
      <div class="topic-content">
        <div class="topic-title">大家平时写代码更喜欢用什么编辑器？</div>
        <div class="topic-text">
          作为程序员，编辑器的选择真的很重要，直接影响工作效率。我自己一直在用VS Code，插件丰富，自定义程度高。想问问大家平时都在用什么编辑器？有什么小众但好用的推荐吗？
        </div>
        <div class="topic-tags">
          <span class="topic-tag">#编程</span>
          <span class="topic-tag">#程序员</span>
          <span class="topic-tag">#开发工具</span>
        </div>
      </div>
      
      <div class="topic-stats">
        <div class="stat-item">
          <i class="fa fa-eye"></i>
          <span>1.8k 浏览</span>
        </div>
        <div class="stat-item">
          <i class="fa fa-comment"></i>
          <span>215 评论</span>
        </div>
      </div>
      
      <div class="topic-actions">
        <button class="action-btn">
          <i class="fa fa-thumbs-o-up"></i>
          <span>点赞</span>
        </button>
        <button class="action-btn">
          <i class="fa fa-comment-o"></i>
          <span>评论</span>
        </button>
        <button class="action-btn">
          <i class="fa fa-share-alt"></i>
          <span>分享</span>
        </button>
        <button class="action-btn">
          <i class="fa fa-bookmark-o"></i>
          <span>收藏</span>
        </button>
      </div>
    </div>
  </div>
  
  <!-- 加载更多 -->
  <div class="load-more">
    <button class="load-more-btn" id="loadMoreBtn">
      <i class="fa fa-refresh"></i> 加载更多
    </button>
  </div>
  
  <!-- 底部导航 -->
  <div class="bottom-nav">
    <a href="#" class="nav-item">
      <i class="fa fa-home"></i>
      <span>首页</span>
    </a>
    <a href="#" class="nav-item active">
      <i class="fa fa-compass"></i>
      <span>话题</span>
    </a>
    <a href="#" class="nav-item">
      <i class="fa fa-plus-circle"></i>
      <span>发布</span>
    </a>
    <a href="#" class="nav-item">
      <i class="fa fa-bell-o"></i>
      <span>通知</span>
    </a>
    <a href="#" class="nav-item">
      <i class="fa fa-user-o"></i>
      <span>我的</span>
    </a>
  </div>

  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 分类标签切换
    document.querySelectorAll('.category-tab').forEach(tab => {
      tab.addEventListener('click', function() {
        // 更新标签选中状态
        document.querySelectorAll('.category-tab').forEach(t => {
          t.classList.remove('active');
        });
        this.classList.add('active');
        
        const category = this.getAttribute('data-category');
        
        // 筛选话题
        document.querySelectorAll('.topic-card').forEach(card => {
          if (category === 'all' || card.getAttribute('data-category') === category) {
            card.style.display = 'block';
          } else {
            card.style.display = 'none';
          }
        });
      });
    });
    
    // 投票功能
    document.querySelectorAll('.poll-option').forEach(option => {
      option.addEventListener('click', function() {
        // 检查是否已投票
        const isVoted = document.querySelector('.poll-option.selected');
        if (isVoted) return;
        
        // 添加选中状态
        this.classList.add('selected');
        
        // 这里可以添加投票提交的逻辑
        alert('投票成功！');
      });
    });
    
    // 点赞功能
    document.querySelectorAll('.action-btn').forEach(btn => {
      btn.addEventListener('click', function() {
        const actionType = this.querySelector('i').className;
        
        // 点赞/取消点赞
        if (actionType.includes('thumbs-o-up') || actionType.includes('thumbs-up')) {
          this.classList.toggle('active');
          if (this.classList.contains('active')) {
            this.innerHTML = '<i class="fa fa-thumbs-up"></i><span>点赞</span>';
          } else {
            this.innerHTML = '<i class="fa fa-thumbs-o-up"></i><span>点赞</span>';
          }
        }
        
        // 收藏/取消收藏
        if (actionType.includes('bookmark-o') || actionType.includes('bookmark')) {
          this.classList.toggle('active');
          if (this.classList.contains('active')) {
            this.innerHTML = '<i class="fa fa-bookmark"></i><span>收藏</span>';
          } else {
            this.innerHTML = '<i class="fa fa-bookmark-o"></i><span>收藏</span>';
          }
        }
        
        // 评论按钮
        if (actionType.includes('comment-o')) {
          alert('打开评论区');
        }
        
        // 分享按钮
        if (actionType.includes('share-alt')) {
          alert('分享到：微信好友、朋友圈、微博、QQ好友');
        }
      });
    });
    
    // 加载更多功能
    document.getElementById('loadMoreBtn').addEventListener('click', function() {
      const btn = this;
      btn.classList.add('loading');
      btn.innerHTML = '<i class="fa fa-spinner fa-spin"></i> 加载中...';
      
      // 模拟加载延迟
      setTimeout(() => {
        const topicsContainer = document.querySelector('.topics-container');
        
        // 随机添加新的话题
        const randomTopics = [
          // 单图话题
          `
          <div class="topic-card" data-category="new">
            <div class="topic-header">
              <div class="topic-creator">
                <img src="https://picsum.photos/100/100?random=20" alt="用户头像" class="creator-avatar">
                <div class="creator-info">
                  <div class="creator-name">美食博主</div>
                  <div class="topic-time">刚刚</div>
                </div>
              </div>
              <button class="btn btn-link p-0 topic-more">
                <i class="fa fa-ellipsis-h"></i>
              </button>
            </div>
            
            <div class="topic-content">
              <div class="topic-title">自制草莓奶油蛋糕，味道不输甜品店！</div>
              <div class="topic-text">
                周末在家尝试做了草莓奶油蛋糕，用的都是新鲜草莓，奶油也是自己打发的，没有添加剂，健康又美味，做法其实很简单哦！
              </div>
              <div class="topic-tags">
                <span class="topic-tag">#美食</span>
                <span class="topic-tag">#烘焙</span>
                <span class="topic-tag">#自制蛋糕</span>
              </div>
              <div class="topic-media media-single">
                <img src="https://picsum.photos/600/400?random=40" alt="蛋糕照片">
              </div>
            </div>
            
            <div class="topic-stats">
              <div class="stat-item">
                <i class="fa fa-eye"></i>
                <span>356 浏览</span>
              </div>
              <div class="stat-item">
                <i class="fa fa-comment"></i>
                <span>24 评论</span>
              </div>
            </div>
            
            <div class="topic-actions">
              <button class="action-btn">
                <i class="fa fa-thumbs-o-up"></i>
                <span>点赞</span>
              </button>
              <button class="action-btn">
                <i class="fa fa-comment-o"></i>
                <span>评论</span>
              </button>
              <button class="action-btn">
                <i class="fa fa-share-alt"></i>
                <span>分享</span>
              </button>
              <button class="action-btn">
                <i class="fa fa-bookmark-o"></i>
                <span>收藏</span>
              </button>
            </div>
          </div>
          `,
          
          // 投票话题
          `
          <div class="topic-card topic-poll" data-category="polls">
            <div class="topic-header">
              <div class="topic-creator">
                <img src="https://picsum.photos/100/100?random=21" alt="用户头像" class="creator-avatar">
                <div class="creator-info">
                  <div class="creator-name">体育迷</div>
                  <div class="topic-time">3小时前</div>
                </div>
              </div>
              <button class="btn btn-link p-0 topic-more">
                <i class="fa fa-ellipsis-h"></i>
              </button>
            </div>
            
            <div class="topic-content">
              <div class="topic-title">你认为今年世界杯冠军会是哪个国家？</div>
              <div class="topic-text">
                世界杯马上就要开始了，各支强队都摩拳擦掌，你最看好哪个国家夺冠？来预测一下吧！
              </div>
              <div class="topic-tags">
                <span class="topic-tag">#世界杯</span>
                <span class="topic-tag">#足球</span>
                <span class="topic-tag">#预测</span>
              </div>
            </div>
            
            <div class="poll-options">
              <div class="poll-option" data-option="1">
                <div class="progress-bar" style="width: 35%"></div>
                <div class="option-text">
                  <span>巴西</span>
                  <span class="option-percent">35%</span>
                </div>
              </div>
              <div class="poll-option" data-option="2">
                <div class="progress-bar" style="width: 25%"></div>
                <div class="option-text">
                  <span>法国</span>
                  <span class="option-percent">25%</span>
                </div>
              </div>
              <div class="poll-option" data-option="3">
                <div class="progress-bar" style="width: 20%"></div>
                <div class="option-text">
                  <span>阿根廷</span>
                  <span class="option-percent">20%</span>
                </div>
              </div>
              <div class="poll-option" data-option="4">
                <div class="progress-bar" style="width: 20%"></div>
                <div class="option-text">
                  <span>其他国家</span>
                  <span class="option-percent">20%</span>
                </div>
              </div>
            </div>
            
            <div class="poll-info">
              已有 1,842 人参与投票 · 还剩 7 天结束
            </div>
            
            <div class="topic-stats">
              <div class="stat-item">
                <i class="fa fa-eye"></i>
                <span>6.2k 浏览</span>
              </div>
              <div class="stat-item">
                <i class="fa fa-comment"></i>
                <span>412 评论</span>
              </div>
            </div>
            
            <div class="topic-actions">
              <button class="action-btn">
                <i class="fa fa-thumbs-o-up"></i>
                <span>点赞</span>
              </button>
              <button class="action-btn">
                <i class="fa fa-comment-o"></i>
                <span>评论</span>
              </button>
              <button class="action-btn">
                <i class="fa fa-share-alt"></i>
                <span>分享</span>
              </button>
              <button class="action-btn">
                <i class="fa fa-bookmark-o"></i>
                <span>收藏</span>
              </button>
            </div>
          </div>
          `
        ];
        
        // 随机添加一个话题
        const randomIndex = Math.floor(Math.random() * randomTopics.length);
        topicsContainer.insertAdjacentHTML('beforeend', randomTopics[randomIndex]);
        
        // 恢复按钮状态
        btn.classList.remove('loading');
        btn.innerHTML = '<i class="fa fa-refresh"></i> 加载更多';
        
        // 为新添加的元素绑定事件
        bindNewTopicEvents();
      }, 1500);
    });
    
    // 为新添加的话题绑定事件
    function bindNewTopicEvents() {
      const newTopics = document.querySelectorAll('.topic-card:last-child');
      
      newTopics.forEach(topic => {
        // 投票功能
        if (topic.classList.contains('topic-poll')) {
          topic.querySelectorAll('.poll-option').forEach(option => {
            option.addEventListener('click', function() {
              const isVoted = topic.querySelector('.poll-option.selected');
              if (isVoted) return;
              
              this.classList.add('selected');
              alert('投票成功！');
            });
          });
        }
        
        // 操作按钮功能
        topic.querySelectorAll('.action-btn').forEach(btn => {
          btn.addEventListener('click', function() {
            const actionType = this.querySelector('i').className;
            
            // 点赞/取消点赞
            if (actionType.includes('thumbs-o-up') || actionType.includes('thumbs-up')) {
              this.classList.toggle('active');
              if (this.classList.contains('active')) {
                this.innerHTML = '<i class="fa fa-thumbs-up"></i><span>点赞</span>';
              } else {
                this.innerHTML = '<i class="fa fa-thumbs-o-up"></i><span>点赞</span>';
              }
            }
            
            // 收藏/取消收藏
            if (actionType.includes('bookmark-o') || actionType.includes('bookmark')) {
              this.classList.toggle('active');
              if (this.classList.contains('active')) {
                this.innerHTML = '<i class="fa fa-bookmark"></i><span>收藏</span>';
              } else {
                this.innerHTML = '<i class="fa fa-bookmark-o"></i><span>收藏</span>';
              }
            }
            
            // 评论按钮
            if (actionType.includes('comment-o')) {
              alert('打开评论区');
            }
            
            // 分享按钮
            if (actionType.includes('share-alt')) {
              alert('分享到：微信好友、朋友圈、微博、QQ好友');
            }
          });
        });
      });
    }
    
    // 搜索功能
    document.querySelector('.search-input').addEventListener('input', function() {
      const searchTerm = this.value.toLowerCase().trim();
      const topicCards = document.querySelectorAll('.topic-card');
      
      topicCards.forEach(card => {
        // 只搜索当前可见的卡片
        if (card.style.display === 'none') return;
        
        const title = card.querySelector('.topic-title').textContent.toLowerCase();
        const text = card.querySelector('.topic-text')?.textContent.toLowerCase() || '';
        const tags = Array.from(card.querySelectorAll('.topic-tag'))
                          .map(tag => tag.textContent.toLowerCase())
                          .join(' ');
        
        const matchesSearch = title.includes(searchTerm) || text.includes(searchTerm) || tags.includes(searchTerm);
        
        card.style.display = matchesSearch ? 'block' : 'none';
      });
    });
    
    // 新建话题按钮
    document.querySelector('.top-nav .fa-plus').parentElement.addEventListener('click', function() {
      alert('创建新话题');
    });
  </script>
</body>
</html>
